<template>
  <div>
    <h1>Button 示例</h1>
    <Demo :component="Button1Demo" />
    <Demo :component="Button2Demo" />
    <Demo :component="Button3Demo" />
    <Demo :component="Button4Demo" />
    <Demo :component="Button5Demo" />
    <h2>Button Attributes</h2>
    <Table :dataSource="dataSource" :columns="columns" />
  </div>
</template>

<script>
import Demo from './Demo/index.vue'
import Button1Demo from './Demo/Button1.demo.vue'
import Button2Demo from './Demo/Button2.demo.vue'
import Button3Demo from './Demo/Button3.demo.vue'
import Button4Demo from './Demo/Button4.demo.vue'
import Button5Demo from './Demo/Button5.demo.vue'
import Table from '../lib/table/Table.vue'

export default {
  components: {
    Demo,
    Table,
  },
  setup(props) {
    const dataSource = [
      {
        id: 1,
        params: 'theme',
        illustrate: 'button类型',
        type: 'string',
        optional: 'link/text',
        defaults: 'button',
      },
      {
        id: 2,
        params: 'size',
        illustrate: 'button大小',
        type: 'string',
        optional: 'big/small',
        defaults: 'normal',
      },
      {
        id: 3,
        params: 'level',
        illustrate: '按钮等级',
        type: 'string',
        optional: 'main/danger',
        defaults: 'normal',
      },
      {
        id: 4,
        params: 'disabled',
        illustrate: '是否禁用',
        type: 'boolean',
        optional: '-',
        defaults: 'false',
      },
      {
        id: 5,
        params: 'loading',
        illustrate: '加载中',
        type: 'boolean',
        optional: '-',
        defaults: 'false',
      },
    ]
    const columns = [
      { title: '参数', prop: 'params', width: '300' },
      { title: '说明', prop: 'illustrate', width: '300' },
      { title: '类型', prop: 'type', width: '100' },
      { title: '可选值', prop: 'optional', width: '100' },
      { title: '默认值', prop: 'defaults' },
    ]
    return {
      Button1Demo,
      Button2Demo,
      Button3Demo,
      Button4Demo,
      Button5Demo,
      dataSource,
      columns,
    }
  },
}
</script>

<style></style>
